
{% extends 'base.html' %}
{% include 'link_css.html' %}
{% block self_head_css_js %}
    <link href="/static/alert/chosen.min.css" rel="stylesheet">
{% endblock %}
{% block self_footer_js %}
    <script src="/static/alert/chosen.jquery.min.js"></script>
{% endblock %}
{% block content %}



<p class="text-center">
    <a target="_blank" href="https://tower.im/projects/ddff17a6dd0a44dda7217658fed1621b/docs/4f67b116a9b645df8d24018ab1a69722/" class="center-block">工单帮助文档</a>
</p>
    


<div class="tabbable" id="tabbable">
    <form  class="col-lg-12" action="{% url 'submit_tickets' %}" method="post" id="checkall" name="site_name" onchange="getSubmit()">
		<ul class="nav nav-tabs">
			<li id="one_tab"><a href="#">第一步</a></li>
			<li id="two_tab"><a href="#">第二步</a></li>
			<!--li><a href="#tab3">第三步</a></li-->
			<li><a href="#">完成</a></li>
		</ul>
		<div class="tab-content">
			<div id="master">
                <table align="center">
                    <tr> 
                        <label for="formGroupExampleInput">工单标题</label>
                        <fieldset class="form-group">
                            <input type="text" class="form-control" id="title" placeholder="title" name="title" required="">
                        </fieldset>  
                        <label for="formGroupExampleInput">选择工单项目</label>
                        <select id="ticket_type" class="selectpicker form-control" data-live-search="true" name="ticket_type"  onchange="getHosts(this.value)">
                            <option value="none"></option>
                            {% for i in ticket_type %}
                                <option value="{{ i.type_name }}">{{ i.type_name }}项目</option>       
                            {% endfor%}
                        </select>
                    <tr>
                    <td><button type="button" onclick="one()">下一步</button></td>
                    </tr>
                </table>
			</div>
			<div id="go" style="display: none">
                <table align="center">
                    <tr>
                    <label for="formGroupExampleInput">项目作用</label>    
                    <fieldset class="form-group">
                        <input type="text" class="form-control" id="function" placeholder="商品详情" name="function">
                    </fieldset>   
                    <label for="formGroupExampleInput">选择主机</label>
                    <fieldset class="form-group">
                        <select id="hosts" name="hosts" class="selectpicker show-tick form-control" multiple data-live-search="false">               
                        </select>
                    </fieldset>
                    <label for="formGroupExampleInput">go项目名称</label>
                    <fieldset class="form-group">
                        <input type="text" class="form-control" id="project" placeholder="spike" name="project">
                    </fieldset>
                    <label for="formGroupExampleInput">go运行命令</label>
                    <fieldset class="form-group">
                        <input type="text" class="form-control" id="go_command" placeholder="spike shop" name="go_command">
                    </fieldset>
                    <label for="formGroupExampleInput">服务级别</label>
                    <fieldset class="form-group">
                        <select id="level" name="level" class="selectpicker show-tick form-control" multiple data-live-search="false">
                            <option value ="P0">P0</option>
                            <option value ="P1">P1</option>
                            <option value ="P2">P2</option>
                        </select>
                    </fieldset>
                    <label for="formGroupExampleInput">服务监听端口(服务监听多个端口用逗号隔开，服务没有监听端口请输入None)</label>
                    <fieldset class="form-group">
                        <input type="text" class="form-control" id="go_port" placeholder="14101,14102" name="go_port">
                    </fieldset>
                    <label for="formGroupExampleInput">statsd地址</label>
                    <fieldset class="form-group">
                        <input type="text" class="form-control" id="statsd" placeholder="http://stats.abc.com/svn/spike" name="statsd">
                    </fieldset>
                    <label for="formGroupExampleInput">sentry地址</label>
                    <fieldset class="form-group">
                        <input type="text" class="form-control" id="sentry" placeholder="http://sentry.abc.com/svn/spike" name="sentry">
                    </fieldset>
                    <td>
                        <button type="button" onclick="go_left()">上一步</button>
                        <button type="button" onclick="go_right()">下一步</button>
                    </td>
                    </tr>
                </table>
			</div>
			<div id="webpage" style="display: none">
                <table class="table table-striped table-bordered table-hover " id="editable" name="editable">
                    <thead>
                        <tr>
                            <th class="text-center">
                                <input id="checkall" type="checkbox" class="i-checks" name="checkall" value="checkall" data-editable='false' onclick="check_all('checkall')">
                            </th>
                            <th class="text-center"> 站点名称 </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for web in webInfo %}
                            <tr class="gradeX">
                                <td class="text-center"  data-editable='false'>
                                    <input name="site_name" value="{{ web.site_value }}" type="checkbox" class="i-checks" onchange="getSubmit()">
                                </td>
                                <td class="text-center"> <a href="#">{{ web.site_name }}</a></td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <table>
                    <td>
                        <button type="button" onclick="webpage_left()">上一步</button>
                        <button id='sub' type="button" disabled="disabled" onclick="webpage_right()">下一步</button>
                    </td>
                    </tr>
                </table>
			</div>
            <div id="uat_jenkins" style="display: none">
                <table align="center">
                    <fieldset class="form-group">
                        <label for="formGroupExampleInput">go项目名称</label>
                        <input type="text" class="form-control" id="jenkins_name" placeholder="请输入你需要添加到jenkins的项目名称" name="jenkins_name">
                    </fieldset>
                    <fieldset class="form-group">
                        <label for="formGroupExampleInput2">再次输入go项目名称</label>
                        <input type="text" class="form-control" id="jenkins_name_again" placeholder="请再次确认你需要添加到jenkins的项目名称" name="jenkins_name_again">
                    </fieldset>
                    <label for="formGroupExampleInput3">选择部署uat环境</label>
                    <select id="uat_env" class="selectpicker form-control"  name="uat_env">
                        <option value="uat">uat</option>
                        <!--option value="uat_aws">uat_aws</option-->
                    </select>
                    <br/>
                </table>

                <table>
                    <td>
                        <button type="button" onclick="uat_jenkins_left()">上一步</button>
                        <button id='jenkinsbutton' type="button" onclick="uat_jenkins_right()">下一步</button>
                    </td>
                    </tr>
                </table>
            </div>
            <div id="offline_go" style="display: none">
                <table align="center">
                    <tr>
                        <label for="formGroupExampleInput">Go 服务名称</label>
                        <select id="service_name" class="selectpicker form-control" data-live-search="true" name="service_name">
                            <option></option>
                            {% for s in services %}
                                <option value="{{ s.name }}">{{ s.name }}</option>
                            {% endfor %}
                        </select>
                        <td>
                            <button type="button" onclick="offline_left()">上一步</button>
                            <button type="button" onclick="offline_right()">下一步</button>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="migrate_go" style="display: none">
                <table align="center">
                    <tr>
                        <label for="formGroupExampleInput">Go 服务名称</label>
                        <select id="service_name_m" class="selectpicker form-control" data-live-search="true" name="service_name_m" onchange="migrateMinion(this.value);">
                            <option></option>
                            {% for s in services %}
                                <option value="{{ s.name }}">{{ s.name }}</option>
                            {% endfor %}
                        </select>
                        <label for="formGroupExampleInput">选择迁出的服务器</label>
{#                        <select multiple id="from_hosts_m" class="selectpicker form-control" data-live-search="true" name="from_hosts">#}
{#                            <option></option>#}
{#                        </select>#}
                        <select multiple id="from_hosts_m" name="from_hosts" class="chosen-select">
                            <option></option>
                        </select>
                        <label for="formGroupExampleInput">选择迁入的服务器</label>
{#                        <select multiple id="to_hosts_m" class="selectpicker form-control" data-live-search="true" name="to_hosts" style="height: 80%;">#}
{#                            <option></option>#}
{#                        </select>#}
                        <select multiple id="to_hosts_m" name="to_hosts" class="chosen-select">
                            <option></option>
                        </select>
                        <td>
                            <button type="button" onclick="migrate_left()">上一步</button>
                            <button type="button" onclick="migrate_right()">下一步</button>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="scale_go" style="display: none">
                <table align="center">
                    <tr>
                        <label for="formGroupExampleInput">Go 服务名称</label>
                        <select id="service_name_s" class="selectpicker form-control" data-live-search="true" name="service_name_s" onchange="scaleMinion(this.value);">
                            <option></option>
                            {% for s in services %}
                                <option value="{{ s.name }}">{{ s.name }}</option>
                            {% endfor %}
                        </select>
                        <label for="formGroupExampleInput">选择扩容的服务器</label>
                        <select multiple id="scale_hosts" name="scale_hosts" class="chosen-select">
                            <option></option>
                        </select>
                        <td>
                            <button type="button" onclick="scale_left()">上一步</button>
                            <button type="button" onclick="scale_right()">下一步</button>
                        </td>
                    </tr>
                </table>
            </div>
			<div id="end" style="display: none">
                <div class="progress">
					<div class="bar bar-success" style="width:100%;"></div>
				</div>
                <label for="formGroupExampleInput">选择工单处理人</label>
                    <fieldset class="form-group">
                        <select id="handler" name="handler" class="selectpicker form-control" data-live-search="true">               
                        </select>
                    </fieldset>
				<p>OK!!!点击提交按钮完成提交....</p>

                <button type="button" onclick="end()">上一步</button>
                <input id="sub" type="submit" value="提交">
			</div>
		</div>
        </form>
</div>

  

<script type="text/javascript">
function one() {
    if(formSubmit("title") && ticket_types("go")){
        $("#master").hide();
        $("#go").show();
    }
    else if(formSubmit("title") && ticket_types("webpage")){
        $("#master").hide();
        $("#webpage").show();
    } 
    else if(formSubmit("title") && ticket_types("uat_jenkins")){
        $("#master").hide();
        $("#uat_jenkins").show();
    } else if(formSubmit("title") && ticket_types("offline_go")){
        $('#master').hide();
        $('#offline_go').show();
    } else if(formSubmit("title") && ticket_types("migrate_go")){
        $('#master').hide();
        $('#migrate_go').show();
    } else if(formSubmit("title") && ticket_types("scale_go")){
        $('#master').hide();
        $('#scale_go').show();
    }
}

function go_left() {
    $("#go").hide();
    $("#master").show();
}

function go_right() {
    if(formSubmit("function") && formSubmit("project") &&
        formSubmit("sentry") && formSubmit("hosts") &&
        formSubmit("go_command") && formSubmit("statsd") &&
        formSubmit("sentry") && formSubmit("go_port") &&
        formSubmit("level")
    ){
        $("#go").hide();
        $("#end").show();
    }
}

function offline_left() {
    $('#offline_go').hide();
    $('#master').show();
}
function offline_right() {
    if(formSubmit("service_name")){
        $('#offline_go').hide();
        $('#end').show();
    }
}
function migrate_left() {
    $('#migrate_go').hide();
    $('#master').show();
}
function migrate_right() {
    if(formSubmit("service_name_m")){
        $('#migrate_go').hide();
        $('#end').show();
    }
}
function migrateMinion(val){
    $.getJSON('/workflow/svc_minions', {'name': val}, function(result){
        console.log(result);
        var objFrom=document.getElementById('from_hosts_m'),
            objTo=document.getElementById('to_hosts_m');
        objFrom.options.length=0;
        objTo.options.length=0;
        for(var i=0;i<result['s'].length;i++){
            var o=document.createElement('OPTION');
            o.value=result['s'][i];
            o.text=result['s'][i];
            objFrom.add(o)
        }
        for(var j=0;j<result['m'].length;j++){
            var oo=document.createElement('OPTION');
            oo.value=result['m'][j];
            oo.text=result['m'][j];
            objTo.add(oo)
        }
        $('#from_hosts_m').trigger("chosen:updated");
        $('#to_hosts_m').trigger("chosen:updated");
    })
}
function scale_left() {
    $('#scale_go').hide();
    $('#master').show();
}
function scale_right() {
    if(formSubmit("service_name_s")){
        $('#scale_go').hide();
        $('#end').show();
    }
}
function scaleMinion(val){
    $.getJSON('/workflow/svc_minions', {'name': val}, function(result){
        console.log(result);
        var objTo=document.getElementById('scale_hosts');
        objTo.options.length=0;
        for(var j=0;j<result['m'].length;j++){
            var oo=document.createElement('OPTION');
            oo.value=result['m'][j];
            oo.text=result['m'][j];
            objTo.add(oo)
        }
        $('#scale_hosts').trigger("chosen:updated");
    })
}


function webpage_left() {
    $("#webpage").hide();
    $("#master").show();
}

function webpage_right() {
    $("#webpage").hide();
    $("#end").show();
}


function uat_jenkins_left() {
    $("#uat_jenkins").hide();
    $("#master").show();
}

function uat_jenkins_right() {
    var jenkins_name = document.getElementById("jenkins_name").value;
    var jenkins_name_again = document.getElementById("jenkins_name_again").value;
    console.log(jenkins_name)
    if(jenkins_name==null || jenkins_name=="") {  
        alert('Please enter the correct project name,try again....')
        return false
    }
    
    if (jenkins_name != jenkins_name_again) {
        alert('Please enter the correct project name,try again....')
        return false
    }
    $("#uat_jenkins").hide();
    $("#end").show();
}

function end() {
    if(ticket_types("go")){
        $("#end").hide();
        $("#go").show();
    }
    else if(ticket_types("webpage")){
        $("#end").hide();
        $("#webpage").show();
    }
    else if(ticket_types("uat_jenkins")){
        $("#end").hide();
        $("#uat_jenkins").show();
    }
    else if(ticket_types("offline_go")){
        $("#end").hide();
        $("#offline_go").show();
    }
    else if(ticket_types("migrate_go")){
        $("#end").hide();
        $("#migrate_go").show();
    }
    else if(ticket_types("scale_go")){
        $("#end").hide();
        $("#scale_go").show();
    }
} 



function getHosts(val) {
    var ticket_type = document.getElementById("ticket_type").value;
    console.log(ticket_type)
    var select = document.getElementById("hosts");
    select.options.length = 0;   // del options
    var handler = document.getElementById("handler");
    handler.options.length = 0;   // del options
    if (ticket_type != "none") {
        $.getJSON("/workflow/get_hosts",{"ticket_type":ticket_type},function (result) {
            console.log(result[0])
            for (i=0;i<result[0].length;i++) {
                var objOption = document.createElement("OPTION")
                objOption.value = result[0][i]
                objOption.text = result[0][i]
                select.add(objOption)
            }
            for (i=0;i<result[1].length;i++) {
                var objOption = document.createElement("OPTION")
                objOption.value = result[1][i]
                objOption.text = result[1][i]
                handler.add(objOption)
            }
            console.log(result.length)
        })
    }  
}

function formSubmit(argv) {  
    var condId = document.getElementById(argv);  
    var text = condId.value;  
    console.log(text)
    var textValue = text.replace(/(^\s*)|(\s*$)/g, "");    
    if(textValue==null || textValue=="") {  
        alert("输入的内容为空,请重新输入！");  
        return false;  
    }
    return 1;       
}  

function ticket_types(value){
    if (document.getElementById("ticket_type").value == value)
    {
        return 1
    }
}



function getSubmit() {
    var services = document.getElementsByName("site_name")
    var count = 0
    for (var i=0;i<services.length;i++) {

        if (services[i].checked) {
            count = count + 1
        }
    }
    if (count != 0){
            $("#sub").attr("disabled", false)     
    }
    else {
            $("#sub").attr("disabled", true)
    }
}
$(document).ready(function(){
    $('.chosen-select').chosen({width: "100%"});
})
</script>
{% endblock content %}